<template>
    <div id="chooseCSV">
        <div class="content">
            <div class='item-div' v-for="name in fileNames" :key="name" @click="select($event)">{{name}}</div>
        </div>

    </div>
</template>

<script>
let electron = require("electron");
import { BrowserWindow, ipcRenderer } from "electron";
var fs = require("fs");
var path = require("path");
var self;
export default {
  name: "chooseCSV",
  data() {
    return {
      fileNames: [],
      type:0,
    };
  },
  methods: {
    select(event) {

      // console.log(event.currentTarget.innerHTML)
      var pack = {};
      pack.name = event.currentTarget.innerHTML;
      pack.type = this.type;
      electron.remote
        .getCurrentWindow()
        .getParentWindow()
        .webContents.send("selectCSV", JSON.stringify(pack));
      electron.remote.getCurrentWindow().destroy();
    },
    
    uniqueCheck()
    {

    }
  },
  mounted() {
   
    self = this;
    ipcRenderer.on("dataJsonPort", function(event, message) {
      // 监听父页面定义的端口
      //   alert(message);
      // console.log('ddsfdfsfd:'+ message);
      // message = message.toString();
      self.type = message.type;
      var pa = fs.readdirSync(message.path);
      //alert(pa);
      // console.log(pa);
      pa.forEach(function(ele, index) {
        var info = fs.statSync(message.path + "/" + ele);
        if (!info.isDirectory()) {
          // console.log("file: " + ele);
          if (ele.indexOf(".csv") > 0) {
            self.fileNames.push(ele);
          }
        }
      });
    });
  }
};
</script>
<style scoped>
#chooseCSV {
  height: 600px;
  box-sizing: border-box;
  border: 2px solid gray;
}
.content {
  display: flex;
  flex-wrap: wrap;
}

.item-div {
  font-size: 16px;
  padding: 5px 5px;
  background-color: rgb(86, 156, 130);
  margin: 5px 5px;
  border: 1px solid gray;
  font-weight: bold;
}
.item-div:hover {
  background-color: yellowgreen;
  cursor: pointer;
  border: 1px solid red;
}
</style>

